<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style>
        .box {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .top {
            width: 100%;
            padding-top: 5px;
            display: flex;
        }

        .topLeft {
            width: 70%;
            padding-left: 50px;
        }

        .topRight {
            width: 30%;
            text-align: right;
            padding-right: 5px;
        }

        .content {
            padding: 0 50px;
        }

        .van-field {
            width: 33.33%;
            float: left;
        }

        .van-cell {
            background-color: transparent;
        }

        .van-field__control {
            border-bottom: 2px solid #e6c678;
        }

        .van-cell::after {
            border-bottom: 0;
        }

        .van-popup {
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="top">
                <div class="topLeft">
                    <van-button size="small" color="linear-gradient(#fffeaa, #c07d39)" type="primary"
                        @click="onClickLeft">返回</van-button>
                </div>
                <div class="topRight">
                </div>
            </div>

            <div class="content">
                <div class="form">
                    <!-- <van-field v-model="formData.ProductName" label="品号：" readonly @click="openBaseScreen('品号')">
                    </van-field> -->
                    <van-field v-model="formData.EquipmentName" label="机台：" readonly @click="openBaseScreen('机台')">
                    </van-field>
                    <van-button size="small" color="linear-gradient(#fffeaa, #c07d39)" type="primary" @click="search">查询
                    </van-button>

                </div>
                <div class="table">
                    <table>
                        <tr>
                            <th>序号</th>
                            <th>机台号</th>
                            <th>项目名</th>
                            <th>值</th>
                            <th>状态</th>
                            <th>时间</th>
                        </tr>
                        <tr v-for="(item, index) in tableData">
                            <td>{{index + 1}}</td>
                            <td>{{item.device_sn}}</td>
                            <td>{{item.varname}}</td>
                            <td>{{item.value}}</td>
                            <td>{{item.Sta}}</td>
                            <td>{{item.create_time}}</td>

                        </tr>
                    </table>
                </div>

                <van-popup v-model="showLoading">
                    <van-loading color="#e6c678" size="40" vertical>加载中，请稍后...</van-loading>
                </van-popup>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            console.log(JSON.stringify(row));
            // if (type == '品号') {
            //     vm.formData.ProductName = row.ProductName;
            //     vm.formData.ProductID = row.ProductID;
            // } 
            if (type == '机台') {
                vm.formData.EquipmentName = row.EquipmentName;
                vm.formData.EquipmentID = row.EquipmentID;
                vm.formData.EquipmentCode = row.EquipmentCode;
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                formData: {
                    EquipmentID: '',
                    EquipmentCode: '',
                    EquipmentName: ''
                },
                showLoading: false,
                tableData: []
            },
            created: function () {
                var that = this;

                if (window.localStorage.getItem('clientHeight') != 752) {
                } else {
                    document.getElementById('navBar').style.fontSize = 'x-large'
                    document.getElementById('navBar').style.fontWeight = '800'
                }
                console.log('ESOP', JSON.stringify(api.pageParam))
            },
            methods: {
                search() {
                    var that = this
                    that.showLoading = true
                    var obj = {
                        Code: that.formData.EquipmentCode || 0,
                    }
                    console.log(JSON.stringify(obj));
                    APP.ajax('NowCaiJi', obj, function (res) {
                        console.log('res', JSON.stringify(res))
                        that.tableData = res.ds
                        that.showLoading = false

                    })
                },
                onClickLeft() {
                    api.closeFrame()
                },
                // openPDF(row) {
                //     var that = this
                //     api.openWin({
                //         name: 'ESOP',
                //         url: 'ESOP.html',
                //         bgColor: '#29292a',
                //         pageParam: {
                //             SOP: row
                //         }
                //     })
                // },
                openBaseScreen: function (str) {
                    var that = this;
                    var obj;
                    // if (str == '品号') {
                    //     obj = {
                    //         allowClear: false,
                    //         showSearch: true,
                    //         searchKey: '',
                    //         serverSearch: false,
                    //         searchBy: ['ProductName', 'ProductCode'],
                    //         isPaging: false,
                    //         type: str,
                    //         cmd: 'ZS_getProductList',
                    //         param: {
                    //         }
                    //     }
                    // } 
                    if (str == '机台') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['EquipmentName'],
                            isPaging: false,
                            type: str,
                            cmd: 'getZSEquipment',
                            param: {
                            }
                        }
                    }

                    api.openWin({
                        name: 'baseScreen',
                        url: 'common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: obj
                    })
                },
            }
        })
    };
</script>

</html>